<template>
  <div class="alert-notifications">
    <div class="section-header">
      <h3>通知告警信息</h3>
    </div>
    
    <div class="notifications-list">
      <!-- 加载态 -->
      <div v-if="loading" class="notification-item">
        <div class="notification-content">
          <div class="notification-title">加载中…</div>
          <div class="notification-desc">正在获取最新的通知告警信息</div>
        </div>
      </div>

      <!-- 空态 -->
      <div v-else-if="notices.length === 0" class="notification-item">
        <div class="notification-content">
          <div class="notification-title">暂无通知</div>
          <div class="notification-desc">当前没有新的通知或告警</div>
        </div>
      </div>

      <!-- 列表渲染 -->
      <template v-else>
        <div v-for="item in notices" :key="item.id" class="notification-item" :class="typeInfo(item.type).cls">
          <div class="notification-icon" :class="typeInfo(item.type).cls">
            <component :is="typeInfo(item.type).icon === 'alert' ? ExclamationCircleOutlined : InfoCircleOutlined" />
          </div>
          <div class="notification-content">
            <div class="notification-title">{{ item.title }}</div>
            <div class="notification-desc">{{ item.content }}</div>
            <div class="notification-time">{{ formatTime(item.time) }}</div>
          </div>
          <div class="notification-action">
            <a-tag :color="typeInfo(item.type).color">{{ typeInfo(item.type).label }}</a-tag>
          </div>
        </div>
      </template>
    </div>
    
    <div class="notifications-footer">
      <div class="pagination-bar">
        <span class="page-info">第 {{ current }} / {{ Math.max(1, Math.ceil(total / pageSize)) }} 页</span>
        <a-pagination
          :current="current"
          :pageSize="pageSize"
          :total="total"
          size="small"
          :showLessItems="true"
          :hideOnSinglePage="true"
          :showSizeChanger="false"
          @change="onPageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { 
  ExclamationCircleOutlined,
  InfoCircleOutlined
} from '@ant-design/icons-vue'
import { noticeApi } from '@/api'

const loading = ref(true)
const notices = ref([])
const current = ref(1)
const pageSize = ref(10)
const total = ref(0)

const typeInfo = (t) => {
  const type = Number(t)
  switch (type) {
    case 1:
      // 告警颜色（更亮）：#F59E0B
      return { cls: 'alert', label: '告警', color: '#F59E0B', icon: 'alert' }
    case 2:
      // 错误颜色（更亮）：#EF4444
      return { cls: 'warning', label: '错误', color: '#EF4444', icon: 'alert' }
    case 0:
    default:
      // 成功颜色（更亮）：#22C55E
      return { cls: 'notice', label: '成功', color: '#22C55E', icon: 'notice' }
  }
}

const formatTime = (t) => {
  if (!t) return ''
  try {
    const d = new Date(t)
    if (!isNaN(d.getTime())) {
      const yyyy = d.getFullYear()
      const mm = String(d.getMonth() + 1).padStart(2, '0')
      const dd = String(d.getDate()).padStart(2, '0')
      const hh = String(d.getHours()).padStart(2, '0')
      const mi = String(d.getMinutes()).padStart(2, '0')
      const ss = String(d.getSeconds()).padStart(2, '0')
      return `${yyyy}-${mm}-${dd} ${hh}:${mi}:${ss}`
    }
  } catch (_) {}
  return String(t)
}

const fetchNotices = async (page = current.value, size = pageSize.value) => {
  loading.value = true
  try {
    // axios 封装在成功时返回 data.data，这里 resp 即为分页对象
    const resp = await noticeApi.getPage({ current: page, size })
    const records = Array.isArray(resp?.records) ? resp.records : []
    // 同步分页信息
    current.value = Number(resp?.current ?? page)
    pageSize.value = Number(resp?.size ?? size)
    total.value = Number(resp?.total ?? records.length)
    notices.value = records.map(it => ({
      id: it.id,
      type: it.noticeType,
      content: it.noticeInfo,
      time: it.createTime,
      title: it.title || (Number(it.noticeType) === 1 ? '告警通知' : Number(it.noticeType) === 2 ? '错误通知' : '成功通知')
    }))
  } catch (e) {
    console.error('获取通知列表失败:', e)
    notices.value = []
  } finally {
    loading.value = false
  }
}

const onPageChange = (page) => {
  fetchNotices(page, pageSize.value)
}

onMounted(() => {
  fetchNotices(current.value, pageSize.value)
})
</script>

<style scoped>
.alert-notifications {
  background: #1a1f2e;
  border-radius: 8px;
  border: 1px solid #2a3441;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #2a3441;
  background: #1e2332;
}

.section-header h3 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

/* 移除“全部已读”按钮相关样式，保持头部简洁 */

.notifications-list {
  max-height: 400px;
  overflow-y: auto;
  background: #1a1f2e;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #2a3441;
  transition: all 0.2s ease;
  position: relative;
}

.notification-item:hover {
  background: rgba(255, 255, 255, 0.02);
}

.notification-item:last-child {
  border-bottom: none;
}

/* 根据设计稿添加左侧状态条 */
.notification-item.alert::before,
.notification-item.notice::before,
.notification-item.warning::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

/* 左侧状态条颜色按需求调整 */
.notification-item.alert::before {
  background: #F59E0B;
}

.notification-item.notice::before {
  background: #22C55E;
}

.notification-item.warning::before {
  background: #EF4444;
}

.notification-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  line-height: 1.4;
}

.notification-desc {
  color: #8892a6;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.notification-time {
  color: #6b7280;
  font-size: 11px;
}

.notification-status {
  flex-shrink: 0;
  margin-top: 2px;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  border: none;
}

.status-badge.alert {
  background: #FF5722;
  color: #ffffff;
}

.status-badge.success {
  background: #4FC3F7;
  color: #ffffff;
}

.status-badge.warning {
  background: #FF9800;
  color: #ffffff;
}

.notifications-footer {
  padding: 8px 16px 16px;
  border-top: 1px solid #2a3441;
  background: #1e2332;
}

.pagination-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.page-info {
  color: #cbd5e1;
  font-size: 12px;
  opacity: 0.9;
}

/* 分页器样式适配深色背景与系统风格 */
.ant-pagination {
  color: #cbd5e1;
}
.ant-pagination-item {
  background: #1a1f2e;
  border: 1px solid #2a3441;
}
.ant-pagination-item a {
  color: #cbd5e1;
}
.ant-pagination-item:hover {
  border-color: #4FC3F7;
}
.ant-pagination-item-active {
  background: #4FC3F7;
  border-color: #4FC3F7;
}
.ant-pagination-item-active a {
  color: #0b1721;
  font-weight: 600;
}
.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
  background: #1a1f2e;
  border: 1px solid #2a3441;
  color: #cbd5e1;
}
.ant-pagination-prev:hover .ant-pagination-item-link,
.ant-pagination-next:hover .ant-pagination-item-link {
  border-color: #4FC3F7;
  color: #4FC3F7;
}

/* 自定义滚动条 */
.notifications-list::-webkit-scrollbar {
  width: 4px;
}

.notifications-list::-webkit-scrollbar-track {
  background: #2a3441;
}

.notifications-list::-webkit-scrollbar-thumb {
  background: #4a5568;
  border-radius: 2px;
}

.notifications-list::-webkit-scrollbar-thumb:hover {
  background: #5a6578;
}
</style>